<script setup lang="ts">
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
const router=useRouter()
function backClick(){
    router.go(-1)
}

const talking = ref<HTMLElement | null>(null); 
const usermessage=ref(JSON.parse(localStorage.getItem('usermessage')||''))

console.log(usermessage.value.talk)
onMounted(() => {
  // 确保在组件挂载后访问DOM元素
  

});
const message = ref(''); 
function uploadMessage() {
    console.log('Uploading message:', message.value);
    var date = new Date()
    const msg =message.value
    var time= date.getTime()
    const token =usermessage.value.token.token
    usermessage.value.talk.push({time ,msg,token})
    console.log(usermessage.value.talk);
const dataToStore = {
    img: usermessage.value.img,
    location: usermessage.value.location,
    male: usermessage.value.male,
    name: usermessage.value.name,
    password: usermessage.value.password,
    passwordcard: usermessage.value.passwordcard,
    talk: usermessage.value.talk,
    tel:usermessage.value.tel ,
    token: usermessage.value.token,
    work:usermessage.value.work
};
console.log(dataToStore);

const newusermessage = JSON.stringify(dataToStore);
localStorage.setItem('usermessage', newusermessage);

    console.log(usermessage);
    
        message.value = '';
}
</script>
<template>

    <main class="box">
        <header class="header">
      <slot  name="left">
      <div class="back">
        <van-icon color="#d6d6d6" size="20" @click="backClick" name="arrow-left" />
        <span @click="backClick">返回</span>
      </div>
 
      </slot>
      <span>聊天窗口</span>
      <slot name="right"></slot>
  </header>
    <div class="content"> 
    <div class="message" v-for="item in usermessage.talk"  :key="usermessage.talk.time">
    <div class="talkbox">
    <div class="messagetext">
        <div class="talktext">{{ item.msg }}</div>
        <img class="imgtalk" :src="usermessage.img" alt=""></div>
        
    </div>
  
    </div>
    
    
    <div class="bottom">
    <van-icon class="phone" size="50" name="../../../public/麦克风 .png"/>   
    <van-field  v-model="message"  @keyup.enter="uploadMessage" class="field" placeholder="输入消息..." />
    <van-icon class="emotion" size="40" name="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9%E6%A1%861/u1392.png"/>   
    <van-icon class="add" size="40" name="    https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9%E6%A1%861/u1393.png"/>  
     </div>
    </div>
    </main>
</template>

<style lang="scss" scoped>
.header{
    color: black;
    background-color: white;
   .back{
    position: absolute;
    left: 0;
    top: 0;
    span{
        color: blue;
    }
   }
}
.content{
    background-color: #f4f6f9;
    padding-bottom: 40px;
        .talkbox{
            width: 100%;
            height: 90px;
            position: relative;
            .messagetext{
                width: 300px;
                position: absolute;
                right: 0;
                top: 0;
                .talktext{
                    padding:10px 30px;
                    border-radius: 5px;
                    position: absolute;
                    right: 70px;
                    top: 20px;
                    font-size: 20px;
                    background-image: url(https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E8%81%8A%E5%A4%A9%E6%A1%861/u1389.png);
                    background-size: 100% 100%;
                    
                }
                .imgtalk{
                width: 60px;
                height: 60px;
                border-radius: 50%;
                position: absolute;
                right: 0;
                top: 0;
       }
            }
                
            
          
           
   
    }
  
 
    .bottom{
        background-color: white;
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
    }
}

</style>
    